var api=require("../../../utils/api.js");
var $=require("../../../utils/util.js");
var app=getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
      factoryImage:api.url +"/assets/factory.png",
      backStyle:"",
      imageStyle:"",
      pixelRatio:1,//像素比
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var phone=wx.getSystemInfoSync();
      this.setData({
        backStyle:"width:"+phone.windowWidth+"px;height:"+phone.windowHeight+"px;",
        imageStyle:"width:"+phone.windowWidth*0.8+"px;height:"+phone.windowHeight*0.8+"px;margin-top:"+phone.windowHeight*0.08+"px;margin-left:"+phone.windowWidth*0.06+"px;",
        pixelRatio:phone.pixelRatio || 1,
      })
      
      console.log(phone);
      const ctx = wx.createCanvasContext('myCanvas')
      const x=phone.windowWidth/375;
      const y=phone.windowHeight/677;
      this.setData({
        x:x,
        y:y
      })
      
      this.draw1(ctx,x,y);//烟感
      this.draw2(ctx,x,y);//进线柜
      this.draw3(ctx,x,y);//水浸
      this.draw4(ctx,x,y);//温湿度
      this.draw5(ctx,x,y);//电路图
      this.draw6(ctx,x,y);//摄像头



      ctx.draw();//绘图
  },
  drawText(ctx,text,positionx,positiony,color,size,angle){
    ctx.save();
    ctx .translate ( positionx*this.data.x, positiony*this.data.y ); //设置画布上的(0,0)位置，也就是旋转的中心点
    ctx.rotate ( angle * Math .PI / 180 );//旋转
    ctx.setFillStyle(color)
    ctx.setFontSize(size);//字体大小
    ctx.fillText(text, 0, 0);//文本内容与位置
    ctx.restore();
  },
  drawLine(ctx){

  },
  draw1(ctx,x,y){//烟感
    //数据框
    ctx.setStrokeStyle('#3EA7F7');//设置线条颜色
    ctx.setLineCap('round');//线端点样式
    ctx.moveTo(265*x, 133.5*y); //起点
    ctx.lineTo(300*x, 133.5*y);//画线
    ctx.moveTo(300*x,75*y);//起点
    ctx.lineTo(300*x,175*y);
    ctx.lineTo(360*x,175*y);
    ctx.lineTo(360*x,75*y);
    ctx.lineTo(300*x,75*y);
    ctx.stroke();//画边框
    //汉字标题
    this.drawText(ctx,"烟感1",340,80,"#3ea7f7",16,90);
    this.drawText(ctx,"烟感",320,80,"#3ea7f7",14,90);
    this.drawText(ctx,"无烟",320,130,"#fafafa",14,90);//烟感

    
  },
  draw2(ctx,x,y){//主进线柜
    //数据框
    ctx.moveTo(270*x, 340*y);
    ctx.lineTo(290*x,340*y);
    ctx.moveTo(290*x,200*y);
    ctx.lineTo(290*x,440*y);
    ctx.lineTo(370*x,440*y);
    ctx.lineTo(370*x,200*y);
    ctx.lineTo(290*x,200*y);
    ctx.stroke();
    //文字标题
    this.drawText(ctx,"主进线柜",355,210,"#3ea7f7",16,90);
    this.drawText(ctx,"电流",335,220,"#3ea7f7",14,90);
    this.drawText(ctx,"相电压",335,280,"#3ea7f7",14,90);
    this.drawText(ctx,"线电压",335,360,"#3ea7f7",14,90);
    //电流
    this.drawText(ctx,"A相电流",320,220,"#3ea7f7",10,90);//A相电流
    this.drawText(ctx,"0",320,260,"#fafafa",10,90);//A相电流值
    this.drawText(ctx,"B相电流",305,220,"#3ea7f7",10,90);//B相电流
    this.drawText(ctx,"0",305,260,"#fafafa",10,90);//B相电流值
    this.drawText(ctx,"C相电流",290,220,"#3ea7f7",10,90);//C相电流
    this.drawText(ctx,"0",290,260,"#fafafa",10,90);//C相电流值
    //电压
    this.drawText(ctx,"A相电压",320,280,"#3ea7f7",10,90);//A相电压
    this.drawText(ctx,"0",320,320,"#fafafa",10,90);//A相电压值
    this.drawText(ctx,"B相电压",305,280,"#3ea7f7",10,90);//B相电压
    this.drawText(ctx,"0",305,320,"#fafafa",10,90);//B相电压值
    this.drawText(ctx,"C相电压",290,280,"#3ea7f7",10,90);//C相电压
    this.drawText(ctx,"0",290,320,"#fafafa",10,90);//C相电压值
    //线电压
    this.drawText(ctx,"Uab线电压",320,350,"#3ea7f7",10,90);//Uab线电压
    this.drawText(ctx,"0",320,410,"#fafafa",10,90);//Uab线电压值
    this.drawText(ctx,"Ubc线电压",305,350,"#3ea7f7",10,90);//Ubc线电压
    this.drawText(ctx,"0",305,410,"#fafafa",10,90);//Ubc线电压值
    this.drawText(ctx,"Uca线电压",290,350,"#3ea7f7",10,90);//Uca线电压
    this.drawText(ctx,"0",290,410,"#fafafa",10,90);//Uca线电压值

  },
  draw3(ctx,x,y){//水浸
  //数据框
    ctx.setStrokeStyle('#3EA7F7');//设置线条颜色
    ctx.moveTo(265*x, 490*y); //起点
    ctx.lineTo(265*x, 510*y);//画线
    ctx.lineTo(300*x, 510*y);//画线
    ctx.moveTo(300*x,460*y);//起点
    ctx.lineTo(300*x,560*y);
    ctx.lineTo(360*x,560*y);
    ctx.lineTo(360*x,460*y);
    ctx.lineTo(300*x,460*y);
    ctx.stroke();//画边框
    //汉字标题
    this.drawText(ctx,"水浸1",340,470,"#3ea7f7",16,90);
    this.drawText(ctx,"水浸",320,470,"#3ea7f7",14,90);
    this.drawText(ctx,"正常",320,520,"#fafafa",14,90);//水浸

  },
  draw4(ctx,x,y){//温湿度
    //数据框
    ctx.setStrokeStyle('#3EA7F7');//设置线条颜色
    ctx.moveTo(215*x,530*y);
    ctx.lineTo(215*x,620*y);
    ctx.lineTo(260*x,620*y);
    ctx.moveTo(260*x,570*y);
    ctx.lineTo(260*x,670*y);
    ctx.lineTo(320*x,670*y);
    ctx.lineTo(320*x,570*y);
    ctx.lineTo(260*x,570*y);
    //汉字标题
    this.drawText(ctx,"环境温湿度",305,580,"#3ea7f7",16,90);
    this.drawText(ctx,"温度",285,580,"#3ea7f7",14,90);
    this.drawText(ctx,"湿度",265,580,"#3ea7f7",14,90);
    this.drawText(ctx,"0%",285,620,"#fafafa",14,90);//水浸
    this.drawText(ctx,"0%",265,620,"#fafafa",14,90);//水浸

    ctx.stroke();
  },
  draw5(ctx,x,y){//配电图

  },
  draw6(ctx,x,y){//摄像头
    //数据框
    ctx.setStrokeStyle('#3EA7F7');//设置线条颜色
    ctx.moveTo(293*x,523*y);
    ctx.lineTo(110*x,523*y);
    ctx.moveTo(110*x,473*y);
    ctx.lineTo(110*x,573*y);
    ctx.lineTo(50*x,573*y);
    ctx.lineTo(50*x,473*y);
    ctx.lineTo(110*x,473*y);
    //字体标题
    this.drawText(ctx,"摄像头",95,480,"#3ea7f7",14,90);

    ctx.stroke();
  },

})